<template>
  <div class="detailBox">
    <el-card class="box-card">
      <el-button type="primary" v-if="userInfo.anchor_apply.skill === 3" @click="handleSongList">歌单</el-button>
      <el-button type="primary" @click="handleIntegralFlow">积分流水</el-button>
      <el-button type="primary" @click="handleMBeanFlow">M豆流水</el-button>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- <h1 class="title">用户资料</h1> -->
        
        <div class="flex mb-4">
            <span class="left">头像：</span>
            <el-image :src="userInfo.head_picture" fit="fill" class="avatar">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
        </div>
        <div class="flex items-center flex-1 mb-4">
            <span class="left">主播编号：</span>
            <span class="right">{{userInfo.user_code}}</span>
        </div>
        <div class="flex items-center flex-1 mb-4">
            <span class="left">主播ID：</span>
            <span class="right">{{userInfo.user_id}}</span>
        </div>
        <div class="flex items-center flex-1 mb-4">
            <span class="left">主播昵称：</span>
            <span class="right">{{userInfo.nickname}}</span>
        </div>
        <div class="flex items-center flex-1 mb-4">
            <span class="left">性别：</span>
            <span class="right">{{userInfo.sex === 1 ? '男' : '女'}}</span>
        </div>
        <div class="flex items-center flex-1 mb-4">
            <span class="left">所属公会：</span>
            <span class="right">{{userInfo.sociaty_name}}</span>
        </div>
        <div class="flex items-center flex-1 mb-4">
            <span class="left">主播等级：</span>
            <span class="right">{{userInfo.anchor_type_name}}</span>
        </div>
        <div class="flex items-center flex-1 mb-4">
            <span class="left">个性签名：</span>
            <span class="right">{{userInfo.signature}}</span>
        </div>
        <div class="flex items-center flex-1 mb-4">
            <span class="left">主播音色：</span>
            <span class="right">{{userInfo.intro_voice_name}}</span>
        </div>
        <div class="flex mb-4 items-center flex-1 mb-4">
            <span class="left">语音签名：</span>
            <audio :src="userInfo.intro_voice" controls></audio>
        </div>
        <div class="flex mb-4">
            <span class="left">主页封面：</span>
            <div class="pictureBox">
                <el-image
                    v-for="(item, index) in userInfo.user_phone"
                    :src="item"
                    fit="fill"
                    :key="index"
                    class="picture"
                    :preview-src-list="srcList"
                ></el-image>
            </div>
        </div>
        <div class="flex mb-4 items-center flex-1 mb-4">
            <span class="left">魅力等级：</span>
            <!-- <span class="right">{{userInfo.charm_level}}</span> -->
            <el-image :src="userInfo.charm_level_img" fit="fill"></el-image>
        </div>
        <div class="flex mb-4 items-center flex-1 mb-4">
            <span class="left">财富等级：</span>
            <!-- <span class="right">{{userInfo.wealth_level}}</span> -->
            <el-image :src="userInfo.wealth_level_img" fit="fill"></el-image>
        </div>
        <div class="flex mb-4 items-center flex-1 mb-4">
            <span class="left">主播技能：</span>
            <span class="right">{{userInfo.ability_str}}</span>
        </div>
    </el-card>
    
    <!--  -->
    <el-dialog
        title="V8面试邀请"
        :visible.sync="visibleInterview"
        width="30%"
        @close="closeDialog('form')">
        <el-form ref="form" :inline="false" :model="form" :rules="rules" label-width="120px" size="normal">
          <el-form-item label="面试场次" prop="session">
            <el-select v-model="form.session" clearable filterable placeholder="请选择">
              <el-option v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>

        </el-form>

        <span slot="footer">
          <el-button @click="visibleInterview = false">返回</el-button>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </span>
      </el-dialog>
    
  </div>
</template>

<script>
import { streamerDetail, setMvp, V8Invitation, streamerCancel } from '@/api/sys/anchorList'
import { InterviewList } from "@/api/anchorManagement/anchorInterviewSetting";
import CheckBoxGroup from './components/checkboxGroup.vue'
export default {
    name: 'detailsPage',
    components: {
        CheckBoxGroup
    },
    data() {
        return {
            srcList: [],
            visibleInterview: false,
            userInfo: {
                add_time: undefined,
                head_picture: undefined,
                // interview_info: undefined,
                intro_voice: undefined,
                is_streamer_mvp: undefined,
                nickname: undefined,
                sex: undefined,
                signature: undefined,
                sociaty_name: undefined,
                streamer_apply: {
                    user_id: undefined,
                    strong_point: undefined,
                    recording_url: "",
                    id: undefined
                },
                anchor_apply: {
                    skill: undefined
                },
                user: {
                    register_time: undefined
                },
                streamer_level: undefined,
                user_code: undefined,
                user_id: undefined,
                user_phone: []
            },
            status: true,
            pictureList: [],
            options: [],
            checkboxGroup1: [],
            listQuery: {
                user_id: undefined
            },
            form: {
                session: undefined
            },
            rules: {
                session: [{required: true, message: '请选择面试场次', trigger: 'blur'}]
            },
            /**
             * 音色
             */
             toneData: undefined,
            toneList: [
                {id: 1,name: '萝莉音'},
                {id: 2,name: '御姐音'},
                {id: 3,name: '暖男音'},
                {id: 4,name: '大叔音'},
                {id: 5,name: '主持音'},
                {id: 6,name: '其他'}
            ],
            /**
             * 性格参数
             */
            characterData: undefined,
            characterList: [
                {id: 1,name: '开朗'},
                {id: 2,name: '阳光'},
                {id: 3,name: '外向'},
                {id: 4,name: '真诚'},
                {id: 5,name: '自信'},
                {id: 6,name: '内向'},
                {id: 7,name: '缺乏自信'},
                {id: 8,name: '承受力差'},
                {id: 9,name: '内敛'},
                {id: 10,name: '头脑灵活'},
                {id: 11,name: '耐心'},
                {id: 12,name: '圆润'},
                {id: 13,name: '情绪化'},
                {id: 14,name: '其他'}
            ],
            /**
             * 特长参数
             */
            strongPointData: undefined,
            strongPointList: [
                {id: 1,name: '唱歌'},
                {id: 2,name: '说唱'},
                {id: 3,name: '情感故事'},
                {id: 4,name: '相声'},
                {id: 5,name: '其他'}
            ],
            /**
             * 喜好
             */
            likeData: undefined,
            likeList: [
                {id: 1,name: '唱歌'},
                {id: 2,name: '游戏'},
                {id: 3,name: '闲聊'},
                {id: 4,name: '倾听'},
                {id: 5,name: '其他'}
            ],
            checkToneList: [],
            checkCharacterList: [],
            checkStrongPointList: [],
            checkLikeList: []
        }
    },
    created() {
        this.listQuery.user_id = this.$route.query.user_id
        
    },
    mounted() {
        this.getTableData()
        // this.getInterviewSession()
    },
    methods: {
        /**
         * getTableData
         * @desc 获取表格数据
         */
        async getTableData() {

            this.loading = true;
            for (let key in this.listQuery) {
                this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
            }
            const detail = await streamerDetail(this.listQuery);
            if (detail.code === 200) {
                this.userInfo = detail.data
                if(this.userInfo.interview_info) {
                    this.checkToneList = this.userInfo.interview_info.streamer_tag.toneData
                    this.checkCharacterList = this.userInfo.interview_info.streamer_tag.characterData
                    this.checkStrongPointList = this.userInfo.interview_info.streamer_tag.strongPointData
                    this.checkLikeList = this.userInfo.interview_info.streamer_tag.likeData
                }
                this.srcList = this.userInfo.user_phone
                
                if(this.userInfo.is_streamer_mvp) {
                    this.status = true
                }else {
                    this.status = false
                }
                this.loading = false;
            }
        },
        async getInterviewSession () {
            const detail = await InterviewList({
                perPage: 90000,
                is_now: 1
            });
            if (detail.code === 200) {
                this.options = detail.data.data;
            }
        },
        CancelCertification() {
            this.$confirm('取消主播认证资格，APP端不可重新认证', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                closeOnClickModal: false
            })
            .then(() => {
                this.StreamerCancel({
                    user_id: this.$route.query.user_id,
                })
            })
            .catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消操作"
                });
            });
        },
        StreamerCancel(data) {
            streamerCancel(data).then(res => {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                }
                this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                    this.$router.replace({path:"anchorList"});
                })
            })
        },
        handleInvitation() {
            this.visibleInterview = true
        },
        V8Invitation(data) {
            V8Invitation(data).then(res => {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                    this.visibleInterview = false
                }
            })
        },
        onSubmit() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.V8Invitation({
                        user_id: this.userInfo.user_id,
                        room_id: this.form.session
                    })
                }
            })
        },
        SetMvp() {
            setMvp({
                user_id: this.userInfo.user_id,
                status: this.status
            }).then(res => {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                }
                this.getTableData()
                this.getInterviewSession()
            })
        },
        closeDialog(form) {
            if (this.$refs[form]) {
                this.$refs[form].clearValidate() // 清除整个表单的校验
                this.$refs[form].resetFields() // 清除整个表单的校验
            }
        },
        toneModel(item){
            this.toneData = item.id
        },
        characterModel(item){
            this.characterData = item.id
        },
        strongPoinModel(item){
            this.strongPoinData = item.id
        },
        likeModel(item){
            this.likeData = item.id
        },
        handleSongList() {
            this.$router.push({
                path: 'songList',
                query: {
                    user_id: this.$route.query.user_id
                }
            })
        },
        handleIntegralFlow() {
            this.$router.push({
                path: 'integralFlow',
                query: {
                    user_id: this.$route.query.user_id,
                    type: 2
                }
            })
        },
        handleMBeanFlow() {
            this.$router.push({
                path: 'mBeanFlow',
                query: {
                    user_id: this.$route.query.user_id,
                    type: 1
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.detailBox{
    .left{
        width: 120px;
        text-align: right;
    }
    .title{
        font-size: 28px;
        margin-bottom: 15px;
    }
    .avatar{
        width: 200px;
        height: 200px;
        overflow: hidden;
        border: 1px darkgray dashed;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 32px;
    }
    .picture{
        width: 200px;
        height: 266px;
        margin-right: 15px;
        margin-bottom: 15px;
        overflow: hidden;
    }
    .pictureBox{
        display: flex;
    }
}
</style>